<template>
  <div v-if="show" class="alert-modal">
    <div class="alert-content" :class="alertLevelClass">
      <div class="alert-header">
        <h3>{{ alarmTitle }}</h3>
        <button @click="close">×</button>
      </div>
      <div class="alert-body">
        <div class="alert-row">
          <span class="label">设备编号：</span>
          <span class="value">{{ alertData.deviceNo || '未知设备' }}</span>
        </div>
        <div class="alert-row" v-if="alertData.channel">
          <span class="label">通道号：</span>
          <span class="value">{{ alertData.channel }}</span>
        </div>
        <div class="alert-row">
          <span class="label">报警类型：</span>
          <span class="value">{{ alarmTypeText }} ({{ typeText }})</span>
        </div>
        <div class="alert-row">
          <span class="label">报警等级：</span>
          <span class="value">{{ levelText }}</span>
        </div>
        <div class="alert-row">
          <span class="label">报警详情：</span>
          <span class="value">{{ alertData.description || '无详细描述' }}</span>
        </div>
        <div class="alert-row">
          <span class="label">报警时间：</span>
          <span class="value">{{ formattedTime }}</span>
        </div>
      </div>
      <div class="alert-footer">
        <button @click="close">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlertModal',
  data() {
    return {
      show: false,
      alertData: {
        deviceNo: '',
        channel: null,
        alarmType: null,
        level: null,
        type: '',
        description: '',
        createTime: null
      }
    }
  },
  computed: {
    alarmTitle() {
      const titles = {
        1: '设备告警',
        2: '线路告警',
        3: '系统告警',
        4: '消息通知'
      }
      return titles[this.alertData.alarmType] || '系统报警'
    },
    alarmTypeText() {
      const types = {
        1: '设备告警',
        2: '线路告警',
        3: '系统告警',
        4: '消息通知'
      }
      return types[this.alertData.alarmType] || '未知类型'
    },
    levelText() {
      const levels = {
        1: '一级 (紧急)',
        2: '二级 (重要)',
        3: '三级 (一般)'
      }
      return levels[this.alertData.level] || '未知等级'
    },
    typeText() {
      const typeMap = {
        'full_length': '全程长度报警',
        'full_atten': '全程衰耗报警',
        'device_network_interruption': '设备连接断开'
      }
      return typeMap[this.alertData.type] || this.alertData.type || '未知类型'
    },
    formattedTime() {
      if (!this.alertData.createTime) return '未知时间'
      try {
        return new Date(this.alertData.createTime).toLocaleString()
      } catch (e) {
        return this.alertData.createTime
      }
    },
    alertLevelClass() {
      return `level-${this.alertData.level || 3}`
    }
  },
  methods: {
    showAlert(alertData) {
      this.alertData = {
        deviceNo: alertData.deviceNo || '',
        channel: alertData.channel || null,
        alarmType: alertData.alarmType || 1,
        level: alertData.level || 3,
        type: alertData.type || '',
        description: alertData.description || '',
        createTime: alertData.createTime || new Date()
      }
      this.show = true
      this.$emit('alert-showed')
    },
    close() {
      this.show = false
      this.$emit('alert-confirmed')
    }
  }
}
</script>

<style scoped>
.alert-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.alert-content {
  background-color: #fff;
  width: 500px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.alert-content.level-1 {
  border-top: 4px solid #f44336;
}

.alert-content.level-2 {
  border-top: 4px solid #ff9800;
}

.alert-content.level-3 {
  border-top: 4px solid #2196f3;
}

.alert-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.alert-header h3 {
  margin: 0;
  font-size: 18px;
}

.level-1 .alert-header {
  background-color: #f44336;
  color: white;
}

.level-2 .alert-header {
  background-color: #ff9800;
  color: white;
}

.level-3 .alert-header {
  background-color: #2196f3;
  color: white;
}

.alert-header button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.alert-body {
  padding: 20px;
  color: #333;
}

.alert-row {
  display: flex;
  margin-bottom: 12px;
  line-height: 1.5;
}

.alert-row .label {
  font-weight: bold;
  min-width: 80px;
  color: #666;
}

.alert-row .value {
  flex: 1;
  word-break: break-all;
}

.alert-footer {
  padding: 12px;
  text-align: right;
  border-top: 1px solid #eee;
}

.alert-footer button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.level-1 .alert-footer button {
  background-color: #f44336;
  color: white;
}

.level-2 .alert-footer button {
  background-color: #ff9800;
  color: white;
}

.level-3 .alert-footer button {
  background-color: #2196f3;
  color: white;
}

.alert-footer button:hover {
  opacity: 0.9;
}
</style>
